<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>03.bootstrap的按钮与表格</title>
        <link rel="stylesheet" href="static/css/bootstrap.css">
    </head>
    <body>
        <!-- 容器 -->
        <div class="container">
            <!-- 按钮的江湖 -->
            <div class="row">
                <span class="lead" style="margin-top: 50px;">input, button, a标签都可以生成按钮</span><br/>
                <input type="button" value="按钮" class="btn btn-inverse"/>
                <button class="btn btn-inverse">按钮</button>
                <a href="#" class="btn btn-inverse">按钮</a> <br/>
                <input type="button" value="巨大的按钮" class="btn btn-info btn-lg"/>
                <input type="button" value="大按钮" class="btn btn-success btn-large"/>
                <input type="button" value="小按钮" class="btn btn-warning btn-small"/>
                <input type="button" value="小按钮" class="btn btn-primary btn-mini"/>
                <input type="button" value="小按钮" class="btn btn-default btn-sm"/>
                <input type="button" value="很小的按钮" class="btn btn-danger btn-xs"/>
                <input type="button" value="占满一行的" class="btn btn-danger btn-block"/>
            </div>
            <hr/>
            <!-- 普通的表格，table-->
            <span class="lead">普通表格, table</span>
            <table class="table">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                </tr>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>

            <span class="lead">带带斑马线的表格, table table-striped</span>
            <table class="table table-striped">
                <tr class="text-success">
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                </tr>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                </tbody>
            </table>

            <span class="lead">带边框的表格，并且带斑马线, table table-striped table-bordered</span>
            <table class="table table-striped table-bordered">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                </tr>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                </tbody>
            </table>

            <span class="lead">带边框的表格，并且带斑马线, 悬停变色, table table-striped table-bordered table-hover</span>
            <table class="table table-striped table-bordered table-hover">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                </tr>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                </tbody>
            </table>
        </div>

    </body>
</html>

